<template>
  <div class="card_audit">
    <div
      v-for="(item, index) in renderData"
      :key="index"
      :class="['card_audit_info', 'clearfix', item.status ? 'success' : 'error']"
      :style="{ 'min-height': index === idx ? '168px' : 'auto', transition: 'all .2s' }"
    >
      <div class="main_color flex_between_aligncenter">
        <div class="main_l">
          <p class="category_txt">{{ item.category || "-" }}</p>
          <p class="detail_txt" v-html="item.detail"></p>
        </div>
        <div class="main_r">
          <p style="color: #2c4068; margin-bottom: 4px">
            <ga-tag
              size="small"
              :color="item.operator?.chinese_name ? 'cyan' : 'arcoblue'"
            >
              <!-- {{ item.operator?.chinese_name ? "用户" : "密钥" }} -->
              用户
            </ga-tag>
            {{ item.operator?.chinese_name || `${item.operator?.username}` || "-" }}
          </p>
          {{ item?.finished_time || "-" }}
        </div>
      </div>
      <div class="tag_status" :style="{ backgroundColor: objColor[item.status] }">
        {{ objCategory[item.status] }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { objCategory, objColor } from "@/constant/index.js";

defineProps({
  renderData: {
    type: Array,
    default: () => [],
  },
});
const idx = ref();
</script>

<style lang="scss" scoped>
.card_audit_info {
  margin-bottom: 16px;
  padding: 16px 56px 16px 32px;
  border-radius: 2px;
  position: relative;
  border-radius: 6px;
  background: #eef1f4;
  // border: 1px solid #E2E8F4;
  .main_color {
    color: #2c4068;
  }
  .secondary_color {
    color: #2c406899;
    width: 200px;
  }
  &:hover {
    // cursor: pointer;
    .opt_btn {
      display: block;
    }
  }
  .main_r {
    color: #2c406899;
    min-width: 170px;
    text-align: left;
  }
  .opt_btn {
    padding: 0 16px;
    border-radius: 16px;
    background: #e7ebea;
    color: #011948;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    font-size: 12px;
  }
  .opt_btn_close {
    color: #2c406899;
    background: #ebe7e7;
  }
}
.category_txt {
  color: #2c4068;
}
.detail_txt {
  font-size: 12px;
  color: #2c406899;
  vertical-align: middle;
  margin-top: 8px;
  line-height: 20px;
  white-space: pre-wrap;
}

.tag_status {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 16px;
  border-radius: 0 6px 0 6px;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  color: #fff;
}
:deep(.garco-divider-text) {
  background: #f9fafb;
}
:deep(.garco-tag) {
  margin-right: 4px;
}
</style>
